<template>
  <view :class="['diy-page', useNav ? 'useFoot' : '']" v-if="page">
    <view class="diy-page-bg" :style="[pageCss]"></view>
    <view
      class="template-section"
      v-for="(item, index) in templates"
      :key="index"
    >
      <pageHeader
        v-if="item.comName == 'classifyHeader'"
        :propsData="item"
      ></pageHeader>
      <classifyContent
        v-if="item.comName == 'classifyContent' && catList.length"
        :catList="catList"
        :propsData="item"
        :useFoot="useNav"
        ref="classfiContent"
      ></classifyContent>
    </view>
    <controls :controlList="controlList"></controls>
    <footNav :controlList="controlList"></footNav>
  </view>
</template>

<script>
import controls from "@/components/diyNew/controls/index.vue";
import pageHeader from "./pageHeader/index.vue";
import classifyContent from "./classifyContent/index.vue";
import footNav from "@/components/diyNew/footNav/index.vue";

export default {
  components: {
    controls,
    pageHeader,
    footNav,
    classifyContent,
  },
  data() {
    return {
      templates: [],
      page: null,
      controlList: [],
      useNav: false,
      catList: [],
    };
  },
  computed: {
    pageCss() {
      if (this.page) {
        let pageCss = JSON.parse(JSON.stringify(this.page.pageCss));
        if (pageCss?.padding) delete pageCss.padding;
        if (pageCss?.borderRadius) delete pageCss.borderRadius;
        return pageCss;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.getDiySystemPages();
    this.getCatList();
  },
  watch: {},
  methods: {
    // 获取diy系统页面配置数据
    getDiySystemPages() {
      this.$allrequest.diyNew.getDiySystemPages({},true).then((res) => {
        uni.stopPullDownRefresh();
        if (!res.code) {
          let list = res.data.list;
          let data = {};
          if (!list.length) return;
          list.forEach((d) => {
            d.template = JSON.parse(d.template);
            if (d.template.system_type == "classify") {
              data = d;
            }
          });
          if (!data?.id) return;
          this.page = data.template;
          this.templates = data.template.templates;
          res.data.controls = JSON.parse(res.data.controls);
          this.controlList = res.data.controls;
          let [footNav] = this.controlList.filter((d) => {
            return d.show_type == "nav";
          });
          if (footNav && footNav.is_show) {
            this.useNav = true;
          }
        }
      });
    },
    getCatList() {
      this.$allrequest.classification
        .catList({
          is_show_goods: 0,
        })
        .then((res) => {
          if (res.code == 0) {
            this.$nextTick(() => {
              this.catList = res.data.list;
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.diy-page {
  width: 100%;
  height: 100vh;
  .diy-page-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.useFoot {
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
</style>
